<template>
  <el-row>
    <!-- 头 -->
    <el-col :span="18">
      <!-- 目录 -->
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="changeMenu"
          style="margin-top:-6px; background-color: rgba(255,255,255,0%)">

        <template v-for="item in menus">
          <el-menu-item v-if="item.subMenu.length === 0" :index="item.index">
            <el-icon>
              <document v-if="item.index === '1'"/>
              <icon-promotion v-if="item.index === '3'"/>
              <icon-menu v-if="item.index === '4'"/>
              <icon-tools v-if="item.index === '5'"/>
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>

          <el-sub-menu v-else :index="item.index">
            <template #title>
              <el-icon>
                <share v-if="item.index === '2'"/>
              </el-icon>
              {{ item.name }}
            </template>
            <el-menu-item v-for="subItem in item.subMenu" :index="subItem.index">{{ subItem.name }}</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>

    </el-col>
    <el-col :span="6">
      <el-row align="middle">
        <el-col :span="13">
          <el-row align="middle">
            工作空间：
            <el-select v-model="space" value-key="id" style="width: 10em" @change="spaceSet">
              <el-option v-for="item in spaceList" :key="item.id" :value="item" :label="item.spaceName"/>
            </el-select>
          </el-row>
        </el-col>

        <el-col :span="2">
          <el-dropdown trigger="click" @command="handleCommand">
                  <span class="el-dropdown-link">
                    <el-avatar :size="42" src="https://mywiki.website/public/lcl/img/me.jpg"/>
                  </span>
            <template #dropdown>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>

        <el-col :span="8">
          用户名称
        </el-col>
      </el-row>
    </el-col>
  </el-row>

  <router-view/>

</template>
<style>
.router-view {
  height: 90vh;
}

.el-row {
  height: 18vh;
}
</style>
